<template>
	<view class="container">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<up-form labelPosition="left" :model="form" :rules="rules" ref="form1" :border-bottom="true" class="form"
			labelWidth="150rpx" labelAlign="left">
			<up-form-item label="收货人" prop="form.name" :border-bottom="true" ref="item1">
				<up-input placeholder="请输入收货人姓名" border="none" inputAlign="right"></up-input>
			</up-form-item>

			<up-form-item label="性别" prop="form.sex" :border-bottom="true" @click="showSex = true; hideKeyboard()"
				ref="item1">
				<!-- <up-input placeholder="请选择性别" border="none" inputAlign="right"></up-input>
                <template #right>
                    <up-icon name="arrow-right"></up-icon>
                </template> -->
				<up-radio-group v-model="radiovalue1" placement="column" @change="groupChange" class="u-flex">
					<up-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange" activeColor="#f0ad4e"
						class="radio-box">
					</up-radio>
				</up-radio-group>
			</up-form-item>
			<up-form-item label="手机号" prop="form.name" :border-bottom="true" ref="item1">
				<up-input inputAlign="right" placeholder="请填写收货手机号" border="none"></up-input>
			</up-form-item>
			<up-form-item label="收货地址" prop="form.name" :border-bottom="true" ref="item1">
				<up-input inputAlign="right" placeholder="请输入收货地址" border="none"></up-input>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template> </up-form-item>
			<up-form-item label="门牌号" prop="form.name" :border-bottom="true" ref="item1">
				<up-input inputAlign="right" placeholder="例：A座8102室" border="none"></up-input>
			</up-form-item>
		</up-form>
		<up-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</up-action-sheet>
		<view class="footer">
			<up-button @click="submit" type="warning" shape="circle">保存</up-button>
		</view>
	</view>
</template>
<script setup ts>
import { ref, reactive } from 'vue';
import { onReady } from '@dcloudio/uni-app';
// 基本案列数据
const radiolist1 = reactive([
	{
		name: '男',
		disabled: false,
	},
	{
		name: '女',
		disabled: false,
	},])
const show = ref(false);
const value1 = ref('2024-10-20');
// 使用 reactive 创建响应式状态  
const state = reactive({
	showSex: false,
	form: {
		name: 'uview-plus UI',
		sex: '',
	},
	actions: [
		{ name: '男' },
		{ name: '女' },
		{ name: '保密' },
	],
	rules: {
		'userInfo.name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		'userInfo.sex': {
			type: 'string',
			max: 1,
			required: true,
			message: '请选择男或女',
			trigger: ['blur', 'change'],
		},
	},
	radio: '',
	switchVal: false,
	rules: {
		'userInfo.name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change']
		},
		code: {
			type: 'string',
			required: true,
			len: 4,
			message: '请填写4位验证码',
			trigger: ['blur']
		},
		'userInfo.sex': {
			type: 'string',
			max: 1,
			required: true,
			message: '请选择男或女',
			trigger: ['blur', 'change']
		},
		radiovalue1: {
			type: 'string',
			min: 1,
			max: 2,
			message: '生命是美好的，请不要放弃治疗',
			trigger: ['change']
		},
		checkboxValue1: {
			type: 'array',
			min: 2,
			required: true,
			message: '不能太宅，至少选两项',
			trigger: ['change']
		},
		intro: {
			type: 'string',
			min: 3,
			required: true,
			message: '不低于3个字',
			trigger: ['change']
		},
		hotel: {
			type: 'string',
			min: 2,
			required: true,
			message: '请选择住店时间',
			trigger: ['change']
		},
		'userInfo.birthday': {
			type: 'string',
			required: true,
			message: '请选择生日',
			trigger: ['change']
		},
	},
});

// 使用 ref 创建响应式引用  
const formRef = ref(null);

// 定义方法  
function sexSelect(e) {
	state.model1.userInfo.sex = e.name;
	if (formRef.value) {
		formRef.value.validateField('userInfo.sex');
	}
}


const datetimePickerRef = ref(null);

const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	return value;
};

onReady(() => {
	// 微信小程序需要用此写法
	datetimePickerRef.value.setFormatter(formatter);
});
</script>
<style lang="scss" scoped>
.container {
	.u-flex {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.radio-box {
		margin-right: 20rpx;
	}

	.form {
		padding: 30rpx;
		background: #fff;
	}

	.footer {
		margin-top: 50rpx;
		padding: 20rpx 60rpx;
	}
}
</style>